自動テストはじめませんか？#1

#Java

k.ootaki

2012.11.02

この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。

こんにちは。

今回は自動テストというちょっと地味なことについて取組んでみようかと思います。

WEBシステムを開発するにあたりWebブラウザでのテストは必須かと思いますが、プログラムを修正する度に確認したり、複数ブラウザで同じ確認を行うのは大変です。そこでブラウザを使ってのテストを自動化してみようかと思います。

Webブラウザを使っての自動テストはSeleniumとう有名なツールがあるので今回はこれを使いたいと思います。

SeleniumはFireFoxのアドオンで使えるSelenium IDEと、JavaやC#などの言語からAPIを呼び出して使うSelenium WebDriverがあります。Selenium IDEはFireFoxのアドオンなので他のブラウザでのテストは出来ません。どうせ自動化するなら色々なブラウザでテストしたいので今回はSelenium WebDriverを使用し、言語はjavaで動かしたいと思います。ただしSelenium IDEを使うことでプログラムをイチから書かずに済むのでこちらもツールとして使用します。

WebDriverで対応しているブラウザは以下になります。

InternetExplorer
Firefox
Chrome
Opera

今回はIE、FireFox、Chromeを対象にします。

環境構築をする

■事前に必要もの（以下は既にある前提で進めます）

Java（今回使用したバージョンは6)
eclipse（今回はpleiades All in Oneのバージョン3.7)
FireFox（今回使用したバージョンは15)

まず、eclipse上で動作できる環境を作ります。今回はMavenを使って環境を作るのでまずMavenをeclipseにインストールします。

eclipseのメニューの「ヘルプ」>「eclipseマーケットプレイス」を選択。「m2e」と入力して検索します。

「Maven Integration for eclipse WTP」をインストールし、eclipseを再起動します。

Mavenプロジェクトを作成します。

1.メニューの「ファイル」>「Maven」から「Mavenプロジェクト」を選択します。

2.「シンプルなプロジェクトの作成」にチェックを入れ、「次へ」ボタンをクリックします。

3.グループId、アーティファクトIdを入力して、「完了」ボタンをクリックします。

JREが1.5になっている場合は1.6に変更します。

JREシステムライブラリを右クリックしてプロパティから変更します。

次にseleniumを動かすのに必要なライブラリを設定します。

作成したプロジェクトを右クリックして、メニューから「Maven」>「依存関係の追加」を選択します。

以下を入力して「OK」ボタンをクリックします。

グループId：「org.seleniumhq.selenium」

アーティファクトId：「selenium-java」

バージョン：「2.25.0」

続いてJUnitを使用するので同様に必要なライブラリを設定します。

seleniumのライブラリ同様に「依存関係の追加」から以下を入力します。

グループId：「junit」

アーティファクトId：「junit」

バージョン：「4.10」

では次にFireFoxのアドオンのSelenium IDEをここからインストールします。今回使用したバージョンは1.9.0でした。

インストールするとメニューの「ツール」に「Selenium IDE」が追加されます。

これで準備が整いました。

動かしてみましょう

自動テストするのに必要なプログラムを用意します。

TestCase001.java

package test; 
import java.util.concurrent.TimeUnit; 
import org.junit.After; 
import org.junit.Before; 
import org.junit.Test; 
import org.openqa.selenium.WebDriver; 
import org.openqa.selenium.firefox.FirefoxDriver; 

public class TestCase001 {
 
	private WebDriver driver; 
	private String baseUrl; 

	@Before 
	public void setUp() throws Exception {
		// 起動するブラウザのドライバを生成します 
		driver = new FirefoxDriver(); 
		// htmlの要素が見つからなかったときの待機時間 
		driver.manage().timeouts().implicitlyWait(30, TimeUnit.SECONDS); 
		// ブラウザ起動時に開くページ 
		baseUrl = ""; 
	}

	@After 
	public void tearDown() throws Exception {
		// 終了
		driver.quit(); 
	}

	@Test 
	public void test() {
		// ここに操作内容を記述する 
	}
}

次にブラウザ動かすプログラムを追記します。ここでSelenium IDEを使います。

FireFoxからSeleniumを起動させます。起動するとブラウザの動作を記録するので、ブラウザで操作を行います。

こではgoogleを開き「クラスメソッド　会社概要」と入力、検索し、弊社の会社概要を開きます。そうするとテーブルタブの中にコマンドが追加されているのが分かります。ここで画面右の●をクリックして記録を停止させます。

このコマンドを全て選択しコピーし、testメソッド内に貼り付け、setUpメソッドのbaseUrlに「https://www.google.co.jp」を設定します。

package test; 
import java.util.concurrent.TimeUnit; 
import org.junit.After; 
import org.junit.Before; 
import org.junit.Test; 
import org.openqa.selenium.WebDriver; 
import org.openqa.selenium.firefox.FirefoxDriver; 

public class TestCase001 {
 
	private WebDriver driver; 
	private String baseUrl; 

	@Before 
	public void setUp() throws Exception {
		// 起動するブラウザのドライバを生成します 
		driver = new FirefoxDriver(); 
		// htmlの要素が見つからなかったときの待機時間 
		driver.manage().timeouts().implicitlyWait(30, TimeUnit.SECONDS); 
		// ブラウザ起動時に開くページ 
		baseUrl = "https://www.google.co.jp"; 
	}

	@After 
	public void tearDown() throws Exception {
		// 終了
		driver.quit(); 
	}

	@Test 
	public void test() {
		// ここに操作内容を記述する 
		driver.get(baseUrl + "/"); 
		driver.findElement(By.id("gbqfq")).clear(); 
		driver.findElement(By.id("gbqfq")).sendKeys("クラスメソッド　会社概要"); 
		driver.findElement(By.linkText("会社概要 ｜ クラスメソッド株式会社")).click()
	}
}

ファイルを選択し、右クリックから「実行」>「JUnitテスト」を選択します。

FireFoxが起動し、自動で動作をするかと思います。簡単に動かすことが出来きましたね。

では次にIEで実行させてみましょう。IE、Chromeはドライバが必要なのでダウンロードします。

（IEは現在のseleniumではドライバはなくても動きますが非推奨なのでドライバを使用します）

IEのドライバはこちら「IEDriverServer_Win32_2.25.3.zip」をダウンロードします。解凍したら「c:\」に「IEDriverServer.exe」をコピーします。

同様にChromeはこちらから「chromedriver_win_23.0.1240.0.zip 」ダウンロードし、同様に「c:\」にコピーします。

setUpメソッドをを修正します。

@Before 
public void setUp() throws Exception {
	// 起動するブラウザのドライバを生成します 
	System.setProperty("webdriver.ie.driver", "C:\\IEDriverServer.exe"); 
	driver = new InternetExplorerDriver(); 
	// htmlの要素が見つからなかったときの待機時間 
	driver.manage().timeouts().implicitlyWait(10, TimeUnit.SECONDS); 
	// ブラウザ起動時に開くページ 
	baseUrl = "https://www.google.co.jp"; 
}

次にIEの設定をします。

メニューの「ツール」>「インターネットオプション」から「セキュリティ」タブを開きます。「インターネット」「ローカルイントラネット」「信頼済みサイト」「制限付きサイト」のすべて「保護モードを有効にする」にチェックを入れてブラウザを閉じます。

JUnitから実行してみましょう。FireFox同様に自動で動作したかと思います。

最後にChromeで実行させます。

IE同様にプログラムを修正します。

@Before 
public void setUp() throws Exception {
	// 起動するブラウザのドライバを生成します 
	System.setProperty("webdriver.chrome.driver", "C:\\chromedriver.exe"); 
	driver = new InternetExplorerDriver(); 
	// htmlの要素が見つからなかったときの待機時間 
	driver.manage().timeouts().implicitlyWait(10, TimeUnit.SECONDS); 
	// ブラウザ起動時に開くページ 
	baseUrl = "https://www.google.co.jp"; 
}

こちらもこれで実行が出来たかと思います。これで３ブラウザで動作させることができました。

操作内容について少し触れたいと思います。

driver.getで対象のURLに遷移させます。

driver.findElementでhtml内の要素を検索します。検索の仕方については何種類かあります。ここでは「By.id」と「By.linkText」が使われているのが分かります。「By.id」は要素のidを探し、「By.linkText」は表示しているリンクのテキスト名で要素を検索しています。

その他にも以下のような検索方法があります。

By.name

By.xpath

By.tagName

By.partialLinkText

By.className

By.cssSelector

詳しくはこちらのサイトに記載されています。

表示している項目のチェックをしましょう

次のような入力フォームから登録した会員情報ページについて表示項目が正しいかチェックしたいと思います。 </>

<html>
  <head>
  <title>会員情報</title>
  <meta charset="UTF-8">
  </head>
  <body>
  <div id="user">
    <dl>
      <dt>名前</dt>
      <dd>山田花子</dd>
      <dt>性別</dt>
      <dd>女</dd>
      <dt>職業</dt>
      <dd>会社員</dd>
    </dl>
  </div>
</body>
</html>

例えば名前が正しく表示されているかをチェックする場合はこのように書きます。

assertEquals("山田花子", driver.findElement(By.xpath("//div[@id='user']/dl/dd[1]")).getText());

まず「山田花子」という要素を検索します。先ほどのようにddタグにはIDがないのでID指定では取得できません。ここではxpathを用いて要素を指定します。xpathはxml形式の特定の要素を指し示す記述方法です。

「//div[@id='user']」で全ての要素からdivタグにuserと指定された要素を取得します。続いて「/dl/dd[1]」でdivタグ内のdlタグを探し、さらにdlタグ内の１つ目のddタグを探しています。

assertEqualsはJUnitの機能で値を比較してくれます。比較した値が間違っていればJUnitはエラーで終了します。

画面キャプチャとりましょう

先ほどのプログラムにキャプチャロジックを追加してみました。

@Test 
public void test() {
  // ここに操作内容を記述する 
  driver.get(baseUrl + "/"); 
  driver.findElement(By.id("gbqfq")).clear(); 
  driver.findElement(By.id("gbqfq")).sendKeys("クラスメソッド　会社概要"); 
  driver.findElement(By.linkText("会社概要 ｜ クラスメソッド株式会社")).click(); 
　// 画面キャプチャをとる
　// キャプチャが画像を取得します 
  File scrFile = ((TakesScreenshot)driver).getScreenshotAs(OutputType.FILE); 
　// 取得したファイルを出力します 
  FileUtils.copyFile(scrFile, new File("c:\\temp\\screenshot1.png"));
}

こんなに簡単にキャプチャが撮れるなんて便利ですね。

しかも画面から見えていない部分もちゃんと撮ってくれます。

テストする際に全てのページで画面キャプチャを撮っておけばエビデンスになります、レイアウトの崩れなどのチェックにも使えるかなと思います。